<template>
    <div class="body">
        <div class="guide">
            <router-link
                to="/about"
                class="guideItem guideUp"
                active-class="active"
            >
                About
            </router-link>
            <router-link
                to="/home"
                class="guideItem guideDown"
                active-class="active"
            >
                Home
            </router-link>
        </div>
        <div class="contain">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import About from "./components/About.vue";
import Home from "./components/Home.vue";
export default {
    name: "App",
    components: {
        About,
        Home,
    },
};
</script>

<style>
.body {
    width: 60%;
    height: 300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.guide {
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.contain {
    background-color: bisque;
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.guideItem {
    width: 100%;
    height: 50%;
    text-decoration: none;
    /* display: flex;
  justify-content: space-around;
  align-items: center; */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.guideUp {
    background-color: skyblue;
}

.guideDown {
    background-color: greenyellow;
}

.active {
    font-size: 30px;
}
</style>
